<template>
  <div class="dashboard-container" id="businessMain-app">
  <div class="container">
    <div class="tableBar">
      <el-tabs @tab-click="handleClick">
        <el-tab-pane label="全部商品" name="first"></el-tab-pane>
        <el-tab-pane label="已上线" name="second"></el-tab-pane>
        <el-tab-pane label="未上线" name="third"></el-tab-pane>
      </el-tabs>
      <div class="tableLab">
        <el-button type="primary" @click="addGoods">
          + 新建商品
        </el-button>
      </div>
    </div>
    <el-table :data="tableData" stripe class="tableBox">
      <el-table-column prop="commodityId" label="商品ID"></el-table-column>
      <el-table-column prop="commodityName" label="商品名称"></el-table-column>
      <el-table-column prop="inventory" label="库存"></el-table-column>
      <el-table-column label="商品状态">
        <template slot-scope="scope">
          <span style="margin-right: 10px;" v-if="scope.row.commodityStatus == 0">未审核</span>
          <span style="margin-right: 10px;" v-if="scope.row.commodityStatus == 1">审核中</span>
          <span style="margin-right: 10px;" v-if="scope.row.commodityStatus == 2">审核驳回</span>
          <span style="margin-right: 10px;" v-if="scope.row.commodityStatus == 3">审核通过</span>
          <span style="margin-right: 10px;" v-if="scope.row.commodityStatus == 4">上线</span>
          <span style="margin-right: 10px;" v-if="scope.row.commodityStatus == 5">下线</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="160" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" class="blueBug" @click="findDetails(scope.row.commodityId)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "BusinessMain",
  data(){
    return {
      input: '',
      aGoodsData: {
        "commodityId": 6,
        "commodityName": "商品名称",
        "commodityDetails": "商品信息",
        "catId": 1,
        "providerName": "提供者名",
        "providerPhone": "电话",
        "serviceTreaty": "保障",
        "unshipAddress": "辽宁省崇左市韶山市",
        "priceType": "纯现金",
        "integralPrice": 0,
        "price": 5.5,
        "onlineTime": "2021-12-08 05:59:01",
        "downlineTime": "1999-07-04 03:11:10",
        "dropSite": "湖南省....",
        "inventory": 600,
        "photo": "http://dummyimage.com/400x400",
        "exchangeRange": 20,
        "commodityType": "类型",
        "commodityStatus": 0
      },
      tableData: [
        {
          "commodityId": 6,
          "commodityName": "商品名称",
          "commodityDetails": "商品信息",
          "catId": 1,
          "providerName": "提供者名",
          "providerPhone": "电话",
          "serviceTreaty": "保障",
          "unshipAddress": "辽宁省崇左市韶山市",
          "priceType": "纯现金",
          "integralPrice": 0,
          "price": 5.5,
          "onlineTime": "2021-12-08 05:59:01",
          "downlineTime": "1999-07-04 03:11:10",
          "dropSite": "湖南省....",
          "inventory": 600,
          "photo": "http://dummyimage.com/400x400",
          "exchangeRange": 20,
          "commodityType": "类型",
          "commodityStatus": 0
        }],
    }
  },
  methods: {
    // tab.index: 0-全部商品，1-已上线，2-未上线
    handleClick(tab) {
      console.log(tab.index);
      if(tab.index == 0){
        // 查询所有
        this.getTable(-1);
      }
      else if(tab.index == 1){
        // 已上线
        this.getTable(4);
      }else{
        // 未上线
        this.getTable(5);
      }
    },
    getTable(commodityStatus) {
      return axios({
        // 查询所有商家接口
        url:"/goods/show/all",
        method:'get',
        params: {
          'commodityStatus': commodityStatus
        }
      }).then(res=>{
        // 响应成功
        this.tableData = res.data.data;
      },err=>{
        console.log("未响应....")
      })
    },
    findDetails(id){
      // 跳转到详情页
      console.log(id);
      this.$router.push({
        path:'/goods/CommodityDetails',
        query:{
          id:id
        }
      })
    },
    addGoods(){
      // 新建商品
      this.$router.push({
        path:'/goods/addGoods'
      })
    }
  },
  mounted() {
    this.getTable(-1);
  }
}
</script>

<style scoped>

</style>
